1 files changed, 60 insertions, 0 deletions
diff --git a/src/routes/[username]/transactions/+page.svelte b/src/routes/[username]/transactions/+page.svelte
new file mode 100644
index 00000000..c91fd900
--- /dev/null
+++ b/src/routes/[username]/transactions/+page.svelte
@@ -0,0 +1,60 @@
+<script>
+	import { AppHeader } from '$comp';
+	import { user, newPayment } from '$lib/store';
+
+	$newPayment = false;
+
+	$: transactions = $user.payments;
+</script>
+
+{#if $user}
+	<AppHeader />
+
+	<div class="my-20">
+		<h1 class="px-3 md:px-0 text-center text-3xl md:text-4xl font-semibold mb-10">
+			Transaction History
+		</h1>
+
+		<div class="max-w-5xl w-11/12 md:w-3/4 xl:w-1/2 mx-auto md:text-lg">
+			<div class="text-secondary grid grid-cols-3 mb-5">
+				<h2>AMOUNT</h2>
+				<h2 class="text-center">TYPE</h2>
+				<h2 class="text-right">TIME</h2>
+			</div>
+
+			<div class="space-y-10">
+				{#if transactions.length}
+					{#each transactions as tx}
+						<div class="grid grid-cols-3 border-b pb-5">
+							<div class="font-bold">
+								<span class="block mb-1"
+									>{tx.amount > 0 ? '+' : ''}{new Intl.NumberFormat('en-US', {
+										style: 'currency',
+										currency: 'USD'
+									}).format(tx.amount * (tx.rate / 100000000))}
+								</span>
+
+								<span class="text-secondary"
+									>{tx.amount > 0 ? '+' : ''}{new Intl.NumberFormat('en-US', {
+										maximumFractionDigits: 0
+									}).format(tx.amount)}
+									SATS
+								</span>
+							</div>
+
+							<div class="text-center">
+								<span class="text-secondary">{tx.amount < 0 ? 'Sent' : 'Received'}</span>
+							</div>
+
+							<div class="text-secondary text-right">
+								{new Date(tx.createdAt).toLocaleDateString(undefined, { dateStyle: 'medium' })}
+							</div>
+						</div>
+					{/each}
+				{:else}
+					<p class="text-secondary text-lg text-center">No transactions yet.</p>
+				{/if}
+			</div>
+		</div>
+	</div>
+{/if}